<template>
	<view class="flex-col homepage">
		<u-steps current="1" style="width: 320px;">
			<u-steps-item title="房屋信息"></u-steps-item>
			<u-steps-item title="住户信息"></u-steps-item>
			<u-steps-item title="物业审核"></u-steps-item>
			<u-steps-item title="认证成功"></u-steps-item>
		</u-steps>
		<!-- <view class="u-line-1 text">请认真填写就诊人信息</view> -->
		<view class="wrapper">

			<u--form labelPosition="left" :model="form" :rules="rules" ref="form1">

				<u-form-item label="住户姓名" labelWidth="160" prop="phone" borderBottom ref="item1">
					<u--input v-model="form.userName" border="none" placeholder="请输入真实姓名"></u--input>
				</u-form-item>

				<u-form-item label="住户性别" labelWidth="160" prop="sex" borderBottom ref="item1">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in sex" :key="item.value">
							<radio :value="item.value" :checked="item.checked" /><span>{{item.label}}</span>
						</label>
					</radio-group>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="证件类型" labelWidth="160" prop="type" borderBottom @click="showType = true;"
					ref="item1">
					<u--input v-model="form.type" disabled placeholder="请选择证件类型" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="证件号码" labelWidth="160" prop="idCard" borderBottom ref="item1">
					<u--input v-model="form.idCard" border="none" placeholder="请输入证件号码"></u--input>
				</u-form-item>


				<u-form-item label="与业主的关系" labelWidth="200" prop="relationShip" borderBottom @click="showRelation = true;"
					ref="item1">
					<u--input v-model="form.relationShip" disabled placeholder="请选择与本人的关系" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="手机号码" labelWidth="160" prop="phone" borderBottom ref="item1">
					<u--input v-model="form.phone" border="none" placeholder="请输入手机号码"></u--input>
				</u-form-item>

				<u-form-item label="邮箱号" labelWidth="120" prop="email" borderBottom ref="item1">
					<u--input v-model="form.email" border="none" placeholder="请输入邮箱号码"></u--input>

				</u-form-item>

				<u-toast ref="uToast"></u-toast>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<u-button @tap="getCode" type="primary">{{tipss}}</u-button>

				<u-form-item label="验证码" labelWidth="120" prop="graphicVerifyCode" borderBottom ref="item1">
					<u--input v-model="form.graphicVerifyCode" border="none" placeholder="请输入验证码"></u--input>
				</u-form-item>

				<u-form-item label="上传本人身份证照片" labelWidth="280" borderBottom ref="item1">
				</u-form-item>
				<view class="flex-row wrapper-two">
					<view class="u-line-3 text-two">请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。</view>
				</view>

				<u-upload class="upload" :width="600" :height="200" :fileList="fileList1" @afterRead="afterRead"
					@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>

				<!-- 上传人面像照片 -->

				<u-upload class="upload1" :width="600" :height="200" :fileList="fileList" @afterRead="afterRead"
					@delete="deletePic" name="1" multiple :maxCount="10"></u-upload>


				<!-- 				<u-form-item label="设置为默认就诊人" labelWidth="125"  prop="defaultPerson" borderBottom ref="item1">
					<u-switch class="switch" style="position: absolute; right: 80rpx;" v-model="isopen" size="20"></u-switch>
				</u-form-item> -->

			</u--form>

			<!-- 关系下拉框 -->
			<u-action-sheet :show="showRelation" :actions="relotion" title="请选择与本人的关系" @close="showRelation = false"
				@select="relationSelect">
			</u-action-sheet>

			<!-- 证件类型下拉框 -->
			<u-action-sheet :show="showType" :actions="type" title="选择证件类型" @close="showType = false"
				@select="typeSelect">
			</u-action-sheet>

		</view>
		<!-- 		<view class="flex-row wrapper-two">
			<view class="u-line-3 text-two">初次添加就诊人请绑定本院就诊卡号，未持有本院就诊卡的患者需到本院自助机或窗口办理就诊卡后方可进行添加。</view>
		</view> -->

		<u-button @click="save" class="button">
			提交审核
		</u-button>
	</view>
</template>
<script>
	import request from '../../../request.js'
	let houseinfo = localStorage.getItem("houseinfo")
	  ? JSON.parse(localStorage.getItem("houseinfo"))
	  : null;
	export default {
		data() {
			return {
				fileList1: [],
				fileListt: [],
				tipss: '',
				seconds: 60,
				sex: [{
					label: "男",
					value: 0,
					checked: true
				}, {
					label: "女",
					value: 1
				}],

				isopen: false,
				showRelation: false,
				showType: false,
				form: {
					userName: '',
					sex:0,
					type:'',
					idCard:'',
					relationShip: '',
					phone:'',
					email:'',
					graphicVerifyCode:'',
					fileUrl:''
				},
				relotion: [{
						name: '本人',
					},
					{
						name: '亲属',
					},
					{
						name: '租户',
					},
					{
						name: '朋友',
					},
				],
				type: [{
						name: '身份证',
					},
					{
						name: '护照',
					},
					{
						name: '港澳通行证',
					},
				],
				// rules: {
				// 	userName: {
				// 		rules: [{
				// 			required: true,
				// 			errorMessage: '请输入用户名'
				// 		}],
				// 		validateTrigger: 'submit'
				// 	},
				// }
			}
		},
		methods: {
			codeChange(text) {
				this.tipss = text;
			},
			getCode() {
				if (this.form.email != null && this.form.email != "") {

					request({
						url: '/systemuser/user/getCheckCode/' + this.form.email,
						method: 'POST',
						dataType: 'json',
						success: (res) => {
							if (res.data.code == '20000') {
								if (this.$refs.uCode.canGetCode) {
									// 模拟向后端请求验证码
									uni.showLoading({
										title: '正在获取验证码'
									})
									setTimeout(() => {
										uni.hideLoading();
										// 这里此提示会被this.start()方法中的提示覆盖
										uni.$u.toast('验证码已发送');
										// 通知验证码组件内部开始倒计时
										this.$refs.uCode.start();
									}, 2000);
								} else {
									uni.$u.toast('倒计时结束后再发送');
								}
							}


						},
					})
				} else {
					uni.showModal({
						content: '请输入邮箱!',
						showCancel: false
					});
				}


			},
			// groupChange(n) {
			//       console.log('groupChange', n);
			//     },
			    radioChange(e) {
				this.form.sex = this.radio = e.detail.value
				console.log(this.form.sex)
			    },
			// save() {
			// 	uni.showModal({
			// 		content: '保存成功',
			// 		showCancel: false
			// 	});
			// 	console.log(this.form)
			// 	console.log("*****"+houseinfo.communityId)
			// },

			typeSelect(e) {
				this.form.type = e.name
				console.log(this.form)
			},
			relationSelect(e) {
				this.form.relationShip = e.name
				console.log(this.form)
			},

			save() {

					request({
						url: '/systemuser/user/appUserInfo',
						data: this.form,
						method: 'POST',
						success: (res) => {
							console.log(res)
							localStorage.setItem("appUserInfo",JSON.stringify(this.form))
							if (res.data.code == 20000) {
								getAppAddPortal()
								console.log(res.data)
								uni.showToast({
									title: '提交成功',
									icon: 'success'
								})
								/* 页面跳转 */
								setTimeout(() => {
									uni.navigateTo({
										url: './myhouse'
									})
								}, 1000)
							} else {
								uni.showToast({
									title: '添加失败,信息错误或者验证码失效',
									icon: 'error'
								})
							}
						}
					})

					function getAppAddPortal(){
						request({
							url: '/housingestate/portal/appAddPortal',
							data: houseinfo,
							method: 'POST',
							success: (res) => {
								console.log(res)
								if (res.data.code == 20000) {
									console.log(res.data)
								} else {
									uni.showToast({
										title: '添加失败,信息错误或者验证码失效',
										icon: 'error'
									})
								}
							}
						})
					}
					




			},







			//删除图片
			// deletePicc(event) {
			// 	this[`fileListt${event.name}`].splice(event.index, 1)
			// },
			// // 新增图片
			// async afterReadd(event) {
			// 	// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			// 	let lists = [].concat(event.file)
			// 	let fileListLen = this[`fileListt${event.name}`].length
			// 	lists.map((item) => {
			// 		this[`fileListt${event.name}`].push({
			// 			...item,
			// 			status: 'uploading',
			// 			message: '上传中'
			// 		})
			// 	})
			// 	for (let i = 0; i < lists.length; i++) {
			// 		const result = await this.uploadFilePromise(lists[i].url)
			// 		let item = this[`fileListt${event.name}`][fileListLen]
			// 		this[`fileListt${event.name}`].splice(fileListLen, 1, Object.assign(item, {
			// 			status: 'success',
			// 			message: '',
			// 			url: result
			// 		}))
			// 		fileListLen++
			// 	}
			// },
			// uploadFilePromise(url) {
			// 	return new Promise((resolve, reject) => {
			// 		let a = uni.uploadFile({
			// 			url: 'http://localhost/systemuser/file/upload2', // 仅为示例，非真实的接口地址
			// 			filePath: url,
			// 			name: 'file',
			// 			formData: {
			// 				user: 'test'
			// 			},
			// 			success: (res) => {
			// 				console.log("++++++++++++++"+res.data)
			// 				setTimeout(() => {
			// 					resolve(res.data.data)
			// 				}, 1000)
			// 			}
			// 		});
			// 	})
			// },



			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},

			uploadFilePromise(url) {

				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://localhost/systemuser/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {

							this.form.fileUrl=res.data
							console.log(this.form.fileUrl)

							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},







		},
		onShow() {

		},






	}
</script>
<style lang="scss" scoped>
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		padding: 46rpx 35rpx 0rpx 35rpx;

		.text {
			width: 100%;
			height: 42rpx;
			margin-bottom: 40rpx;
			font-size: 32rpx;
			color: #bab3b5;
		}

		.wrapper {
			width: 678rpx;
			height: 700rpx;
			margin-bottom: 56rpx;
			border-top-width: 2rpx;
			border-top-style: solid;
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
		}

		.upload {

			width: 100%;
			top: 50rpx;
			padding-left: 24rpx;
		}

		.upload1 {
			width: 100%;
			top: 100rpx;
			padding-left: 24rpx;
		}

		.wrapper-two {
			width: 678rpx;
			justify-content: center;
			padding: 29rpx 0rpx;
			border-radius: 20rpx;
			background: #f7f7f8;

			.text-two {
				width: 650rpx;
				height: 114rpx;
				color: #c5bbc6;
			}
		}

		.button {
			width: 694rpx;
			height: 90rpx;
			bottom: -850rpx;
			display: block;
			margin-right: auto;
			margin-left: auto;
			font-size: 36rpx;
			background: #006eff;
			color: #ffffff;
		}
	}
</style>
